import React,{useState} from "react";
import bg from '../../../assets/images/image/hdpi/user_bg.png'
// import src from '../../../assets/images/image/hdpi/girl.png'
import style from './style.module.scss'
import { NavTitle } from "../../../components";
import { useParams } from 'react-router-dom'
import { HisPatientsParamsState, HisPatientsRowState, getHisPatient } from "../../../api/patientCircle";
import { List } from "react-vant";
import MypathienList from "../../../components/mypathienList";
import { useLocation } from 'react-router-dom'
const Index: React.FC = () => {
  const location = useLocation();
  const nickName=location.state.nickName;
  const headPic=location.state.headPic;
  const {patientUserId} = useParams()
  const [paramsstate,setParamsstate]=useState<HisPatientsParamsState>({
    patientUserId:Number(patientUserId),
    page:1,
    count:5
  })
  const [hisPatientList,setHisPatientList]=useState<HisPatientsRowState[]>([])
  // 上拉加载开关
  const [finished, setFinished] = useState<boolean>(false)
  const onLoadRefresh = async () => {

    const resp = await getHisPatient(paramsstate);
    setHisPatientList([...hisPatientList, ...resp.result])
    setParamsstate({
      ...paramsstate,
      page: paramsstate.page + 1
    })
    resp.result.length<paramsstate.count ? setFinished(true) : setFinished(false)
  }
  return <div>
  <div className={style.login} style={{ backgroundImage: `url(${bg})` }}></div>
  <div className={style.personal}>
    <img className={style.img} src={headPic} alt="" />
    <p>{nickName}</p>
  </div>
  <div className={style.title}><NavTitle title="他发布的病友圈"></NavTitle></div>
  <div>
  <List finished={finished} onLoad={onLoadRefresh}>
          {/* 循环渲染列表 */}
          {hisPatientList.map((v) => {
            return <div key={v.sickCircleId}>
              <MypathienList item={v}></MypathienList>
            </div>
          })}
  </List>
  </div>
</div>;
};

export default Index;
